.nav-bar-box {
  width: 100%;
  background-color: #09f;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.nav-bar-box .status-bar {
  width: 100%;
  height: 100px;
}

.nav-bar-box .title-bar {
  width: 100%;
  height: 220px;
  color: white;
  font-size: 32px;
  display: flex;
  justify-content: center;
}

.homebox {
  padding: 0 20px;
  width: 91vw;
  height: 46vh;
  background-color: white;
  border-radius: 20px;
  border: 1px solid #ccc;
  position: absolute;
  top: 270px;
  left: 15px;
  z-index: 999;
}

.homebox .content {
  width: 95vw;
  padding: 10px;
  position: absolute;
  left: -16px;
  top: 0;
}

.homebox .content .input {
  width: 100%;
  height: 80px;
  display: flex;
}

.homebox .content .input .AtIcon {
  width: 10%;
  margin-top: 20px;
  margin-left: 5px;
}

.homebox .content .input Input {
  width: 86%;
  height: 80px;
  border: none;
  border-bottom: 1px solid #ccc;
}

.homebox .content .input1 {
  width: 95vw;
  height: 50px;
  border: none;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homebox .content .input1 Input {
  width: 50%;
  height: 100%;
}

.homebox .content .input2 {
  width: 90vw;
  height: 55px;
  padding: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
}

.homebox .content .input2 Input {
  width: 75vw;
}

.homebox .content .btns {
  width: 90vw;
  height: 170px;
  margin: 10px 0;
  padding: 10px;
}

.homebox .content .btns .btn1 {
  width: 100%;
  height: 100px;
  border-radius: 15px;
  border: none;
  background-color: #f04;
  color: white;
}

.homebox .content .btns .btn2 {
  width: 100%;
  height: 70px;
  align-items: center;
  text-align: center;
  line-height: 70px;
  border-radius: 40px;
  border: 1px solid #f04;
  color: #f04;
  margin-top: 30px;
}

.content1 {
  width: 95vw;
  padding: 10px;
  position: absolute;
  left: 670px;
  top: 0;
}

.content1 .input {
  width: 100%;
  height: 80px;
  display: flex;
}

.content1 .input .AtIcon {
  width: 10%;
  margin-top: 20px;
  margin-left: 5px;
}

.content1 .input Input {
  width: 86%;
  height: 80px;
  border: none;
  border-bottom: 1px solid #ccc;
}

.content1 .input1 {
  width: 95vw;
  height: 50px;
  border: none;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content1 .input1 Input {
  width: 50%;
  height: 100%;
}

.content1 .input2 {
  width: 95vw;
  height: 55px;
  padding: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
}

.content1 .input2 Input {
  width: 68vw;
}

.content1 .btns {
  width: 90vw;
  height: 170px;
  margin: 10px 0;
  padding: 10px;
}

.content1 .btns .btn1 {
  width: 100%;
  height: 100px;
  border-radius: 15px;
  border: none;
  background-color: #f04;
  color: white;
}

.content1 .btns .btn2 {
  width: 100%;
  height: 70px;
  align-items: center;
  text-align: center;
  line-height: 70px;
  border-radius: 40px;
  border: 1px solid #f04;
  color: #f04;
  margin-top: 30px;
}

.tags {
  width: 100%;
  padding: 15px;
  height: 260px;
  margin-top: 900px;
  display: flex;
  align-items: center;
}

.tags .taglist {
  width: 43%;
  height: 130px;
  background-color: #f5f2eb;
  opacity: 0.8;
  padding: 10px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tags .taglist View {
  width: 90%;
}

.tags .taglist View .tit {
  font-weight: bold;
  font-size: 36px;
}

.tags .taglist AtIcon {
  width: 10%;
}

.tags1 {
  width: 100%;
  padding: 15px;
  height: 260px;
  margin-top: -110px;
  display: flex;
  align-items: center;
}

.tags1 .taglist {
  width: 43%;
  height: 130px;
  background-color: antiquewhite;
  opacity: 0.8;
  padding: 10px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tags1 .taglist View {
  width: 90%;
}

.tags1 .taglist View .tit {
  font-weight: bold;
  font-size: 36px;
}

.tags1 .taglist AtIcon {
  width: 10%;
}
